import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { message, Tooltip } from 'antd';
import { TableC, SecondHeaderC, PrimaryGhostC } from '../../../../components';
import colorAll from '../../../../css/colors';
import _ from 'lodash';
import { useExportMoreTableInSheet } from '@/src/utils/exportExcelHooks';

@connect(({ profitAndLossM, loading }) => ({
  profitAndLossM,
  loading: loading.effects['profitAndLossM/getTableData'],
}))
export default class TableRender extends PureComponent {
  state = {
    oldDataSource: [],
    columns: [],
    tableData: [],
    sortItem: '',
    order: '',
    columnKey: '',
    sortedInfo: {},
    date: {},
    startDate: '',
    endDate: '',
    TableData: {},
  };

  componentDidMount() {
    const { dispatch, index, beginDate, endDate } = this.props;
    const portfolioCode = this.props.portfolioCode
      ? {
          portfolioCode: this.props.portfolioCode,
        }
      : {
          portfolioCodeList: this.props.portfolioCodeList,
        };
    const datas = {
      ...portfolioCode,
      timeRange: index,
      beginDate,
      endDate,
    };
    this.getData(datas);
  }

  componentDidUpdate(prevProps, prevState) {
    const { dispatch, index, beginDate, endDate } = this.props;
    // 传入的随机数改变时重新请求接口
    if (prevProps.num !== this.props.num) {
      const portfolioCode = this.props.portfolioCode
        ? {
            portfolioCode: this.props.portfolioCode,
          }
        : {
            portfolioCodeList: this.props.portfolioCodeList,
          };
      if (index == '0' && beginDate == undefined && endDate == undefined) {
      } else {
        const datas = {
          ...portfolioCode,
          timeRange: index,
          beginDate,
          endDate,
        };
        this.getData(datas);
      }
    }
  }

  // 请求数据
  getData = (datas) => {
    const { dispatch } = this.props;

    dispatch({
      type: 'profitAndLossM/getTableData',
      payload: datas,
      callback: (res) => {
        const { data } = res;
        const { date } = data;
        const { dataSource } = data;
        if (res.code == 0) {
          const oldDataSource = _.cloneDeep(data.dataSource);

          this.setState({
            TableData: data,
            columns: data.columns,
            tableData: dataSource,
            startDate: date.startDate,
            endDate: date.endDate,
            oldDataSource,
          });
        } else {
          message.error(res.msg);
          this.setState({
            tableData: [],
            startDate: '',
            endDate: '',
          });
        }
      },
    });
  };

  // 表格排序
  onChangeTable = (pagination, filt, sorter) => {
    this.changeSorter(sorter);
  };

  // 表格排序
  changeSorter = (sorter) => {
    const { sortedInfo, columns, tableData, startDate, endDate } = this.state;

    const oldDataSource = _.cloneDeep(this.state.oldDataSource);
    const key = sorter.columnKey;
    const type = sorter.order;
    const compare = (key, type) => {
      if (type == 'descend') {
        return (obj1, obj2) => {
          // 升序
          const val1 = obj1[key];
          const val2 = obj2[key];
          if (val1 < val2) {
            return -1;
          } else if (val1 > val2) {
            return 1;
          } else {
            return 0;
          }
        };
      } else if (type == 'ascend') {
        return (obj1, obj2) => {
          // 降序
          const val1 = obj1[key];
          const val2 = obj2[key];
          if (val1 < val2) {
            return 1;
          } else if (val1 > val2) {
            return -1;
          } else {
            return 0;
          }
        };
      } else if (type == undefined) {
        //  排序第三种状态恢复成默认状态

        tableData.map((item) => {
          oldDataSource.map((items) => {
            if (item.id == items.id && item.children && item.children.length) {
              item.children = _.cloneDeep(items.children);
            }
          });
        });
      }
    };
    if (tableData.length) {
      tableData.map((item) => {
        if (item.children && item.children.length) {
          const child = item.children; // 仅对子节点排序
          child.sort(compare(key, type));
        }
      });
    }
  };

  // 表格数据正红负绿
  changeColor = (text) => {
    const colorArr = colorAll.debtAndProfit.text;
    const color = text >= 0 ? colorArr[0] : colorArr[1];
    const str = Number(text)
      .toFixed(2)
      .replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
    return <span style={{ color: `${color}` }}>{str}</span>;
  };

  // 保留两位小数处理成千分位
  changeNumber = (e) => {
    const str = Number(e)
      .toFixed(2)
      .replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
    return str;
  };

  // 改变columns属性
  // changeColumns = (columns) => {
  //   let arr = columns;
  //   arr.map(item => {
  //     if (item.key == 'allTimePnl') {
  //       item.title = <span>{item.title}
  //         <Tooltip title='已实现盈亏与区间浮动盈亏之和' >
  //           <Icon style={{ paddingLeft: '7px' }} type="question-circle-o" />
  //         </Tooltip>
  //       </span>;
  //       item.align = 'right';
  //       item.sorter = true;
  //       item.type = 'updownText';
  //     }
  //     if (item.key == 'allGainedPnl') {
  //       item.title = <span>{item.title}
  //         <Tooltip title='固收类资产，为累计利息与买卖价差收益之和，持有到期类标的会额外考虑溢折价影响。权益类资产，为买卖价差收益' >
  //           <Icon style={{ paddingLeft: '7px' }} type="question-circle-o" />
  //         </Tooltip>
  //       </span>;
  //       item.align = 'right';
  //       item.sorter = true;
  //       item.type = 'updownText';
  //     }
  //     if (item.key == 'allFloatPnl') {
  //       item.title = <span>{item.title}
  //         <Tooltip title='资产市值变化造成的未实现盈亏' >
  //           <Icon style={{ paddingLeft: '7px' }} type="question-circle-o" />
  //         </Tooltip>
  //       </span>;
  //       item.align = 'right';
  //       item.sorter = true;
  //       item.type = 'updownText';
  //     }
  //     if (item.children) {
  //       item.children = item.children.map(y => {
  //         return {
  //           title: y.title,
  //           key: y.key,
  //           dataIndex: y.key,
  //           // width: 150,
  //           align: 'right',
  //           render: (text) => this.changeNumber(text)
  //         }
  //       })
  //     }
  //   })
  //   return arr;
  // }

  showTable = () => {
    const { sortedInfo, columns, tableData, startDate, endDate } = this.state;
    const { loading } = this.props;
    const newColumns = columns.map((x) => {
      // allTimePnl:总盈亏  allGainedPnl：已实现盈亏 区间浮动盈亏：allFloatPnl
      if (x.key == 'allTimePnl' || x.key == 'allGainedPnl' || x.key == 'allFloatPnl') {
        let tooltip;
        if (x.key == 'allTimePnl') {
          tooltip = '已实现盈亏与区间浮动盈亏之和';
        } else if (x.key == 'allGainedPnl') {
          tooltip = '固收类资产，为累计利息与买卖价差收益之和，持有到期类标的会额外考虑溢折价影响。权益类资产，为买卖价差收益';
        } else {
          tooltip = '资产市值变化造成的未实现盈亏';
        }
        return {
          title: (
            <span>
              {x.title}
              <Tooltip title={tooltip}>
                <QuestionCircleOutlined style={{ paddingLeft: '7px' }} />
              </Tooltip>
            </span>
          ),
          key: x.key,
          dataIndex: x.key,
          width: 150,
          align: 'right',
          sorter: true,
          type: 'updownText',
          // sortOrder: sortedInfo.columnKey === x.key && sortedInfo.order,
          // render: (text, record) => {
          //   return this.changeColor(text)
          // }
        };
      } else if (x.children) {
        return {
          title: x.title,
          children: x.children.map((y) => {
            return {
              title: y.title,
              key: y.key,
              dataIndex: y.key,
              width: 150,
              align: 'right',
              render: (text) => this.changeNumber(text),
            };
          }),
        };
      } else {
        return {
          title: x.title,
          key: x.key,
          dataIndex: x.key,
          width: 120,
          render: (text) => (text === null || text === undefined ? '' : text),
        };
      }
    });

    return (
      <div>
        <TableC
          columns={newColumns}
          dataSource={tableData}
          loading={loading}
          // pagination={false}
          hidePage={true}
          scroll={{ x: 'max-content', y: 350 }}
          onChange={this.onChangeTable}
          rowKey='id'
        />
      </div>
    );
  };

  changeTableData = (data) => {
    const columns = this.props.portfolioCodeList
      ? [
          { title: '资产类别', key: 'assetType' },
          { title: '代码', key: 'tradingCode' },
          { title: '简称', key: 'securityName' },
          { title: '持仓类型', key: 'posType' },
          { title: '交易属性', key: 'tradeAttr' },
          { title: '产品代码', key: 'portfolioCode' },
          { title: '总盈亏', key: 'allTimePnl' },
          { title: '已实现盈亏', key: 'allGainedPnl' },
          { title: '区间浮动盈亏', key: 'allFloatPnl' },
          { title: '持仓市值', key: 'BHoldAmount' },
          { title: '持仓成本', key: 'BHoldCost' },
          { title: '浮动盈亏', key: 'BFloatPnl' },
          { title: '持仓市值', key: 'EHoldAmount' },
          { title: '持仓成本', key: 'EHoldCost' },
          { title: '浮动盈亏', key: 'EFloatPnl' },
        ]
      : [
          { title: '资产类别', key: 'assetType' },
          { title: '代码', key: 'tradingCode' },
          { title: '简称', key: 'securityName' },
          { title: '持仓类型', key: 'posType' },
          { title: '交易属性', key: 'tradeAttr' },
          { title: '总盈亏', key: 'allTimePnl' },
          { title: '已实现盈亏', key: 'allGainedPnl' },
          { title: '区间浮动盈亏', key: 'allFloatPnl' },
          { title: '持仓市值', key: 'BHoldAmount' },
          { title: '持仓成本', key: 'BHoldCost' },
          { title: '浮动盈亏', key: 'BFloatPnl' },
          { title: '持仓市值', key: 'EHoldAmount' },
          { title: '持仓成本', key: 'EHoldCost' },
          { title: '浮动盈亏', key: 'EFloatPnl' },
        ];
    let dataSource = [];
    if (data && data.length) {
      // 处理数据转换成字符串
      data.map((i) => {
        for (const j in i) {
          if (typeof i[j] === 'number') {
            i[j] = i[j].toString();
          }
        }
      });
      data.map((item, index) => {
        const obj = {};
        const arr = [];
        let arrItem = [];
        if (item.children && item.children.length) {
          arrItem = this.changeTableData(item.children);
        }
        columns.map((columnsItem) => {
          obj[columnsItem.key] = item[columnsItem.key];
        });
        arr.push(obj);
        dataSource = [...dataSource, ...arr, ...arrItem];
      });
    }
    return dataSource;
  };

  handleTableInSheetExport = () => {
    const { portfolioName, portfolioCodeList, portfolioCode } = this.props;
    const { TableData } = this.state;
    const dataSource3 = this.changeTableData(TableData.dataSource);
    const groupedHeader = portfolioCodeList
      ? [
          [
            '资产类别',
            '代码',
            '简称',
            '持仓类型',
            '交易属性',
            '产品代码',
            '总盈亏',
            '已实现盈亏',
            '区间浮动盈亏',
            `期初（${TableData.date.startDate}）`,
            '',
            '',
            `期末（${TableData.date.endDate}）`,
            '',
            '',
          ],
          ['', '', '', '', '', '', '', '', '', '持仓市值', '持仓成本', '浮动盈亏', '持仓市值', '持仓成本', '浮动盈亏'],
        ]
      : [
          [
            '资产类别',
            '代码',
            '简称',
            '持仓类型',
            '交易属性',
            '总盈亏',
            '已实现盈亏',
            '区间浮动盈亏',
            `期初（${TableData.date.startDate}）`,
            '',
            '',
            `期末（${TableData.date.endDate}）`,
            '',
            '',
          ],
          ['', '', '', '', '', '', '', '', '持仓市值', '持仓成本', '浮动盈亏', '持仓市值', '持仓成本', '浮动盈亏'],
        ];
    const sheetConfig = {
      表名: {
        sheetBody: [
          {
            type: 3,
            anyXlsxData: portfolioCodeList
              ? [[`产品组代码：${portfolioCodeList}`, `产品组名称：${portfolioName}`, `日期区间:${TableData.date.startDate}~${TableData.date.endDate}`, '']]
              : [[`产品代码：${portfolioCode}`, `产品名称：${portfolioName}`, `日期区间:${TableData.date.startDate}~${TableData.date.endDate}`, '']],
          },
          {
            type: 3,
            anyXlsxData: [[''], ['盈亏明细', '', '', '']],
          },
          {
            type: 2, // 为2是为分组表头， 不传column传groupedHeader
            groupedHeader,
            dataSource: dataSource3,
          },
        ],
        columnWidth: [{ wpx: 100 }, { wpx: 120 }, { wpx: 100 }], // 列1： 100，列2： 120， 列3： 100
        mergeRules: portfolioCodeList
          ? [
              { s: { r: 0, c: 2 }, e: { r: 0, c: 3 } }, // 合并第1行 1到2列
              { s: { r: 2, c: 0 }, e: { r: 2, c: 3 } }, // 合并第3行 1到4列
              { s: { r: 3, c: 0 }, e: { r: 4, c: 0 } }, // 合并第4行第5行 第1列
              { s: { r: 3, c: 1 }, e: { r: 4, c: 1 } }, // 合并第4行第5行 第2列
              { s: { r: 3, c: 2 }, e: { r: 4, c: 2 } }, // 合并第4行第5行 第3列
              { s: { r: 3, c: 3 }, e: { r: 4, c: 3 } }, // 合并第4行第5行 第4列
              { s: { r: 3, c: 4 }, e: { r: 4, c: 4 } }, // 合并第4行第5行 第5列
              { s: { r: 3, c: 5 }, e: { r: 4, c: 5 } }, // 合并第4行第5行 第6列
              { s: { r: 3, c: 6 }, e: { r: 4, c: 6 } }, // 合并第4行第5行 第7列
              { s: { r: 3, c: 7 }, e: { r: 4, c: 7 } }, // 合并第4行第5行 第8列
              { s: { r: 3, c: 8 }, e: { r: 4, c: 8 } }, // 合并第4行第5行 第8列
              { s: { r: 3, c: 9 }, e: { r: 3, c: 11 } }, // 合并第4行 10到12列
              { s: { r: 3, c: 12 }, e: { r: 3, c: 14 } }, // 合并第4行 13到15列
            ]
          : [
              { s: { r: 0, c: 2 }, e: { r: 0, c: 3 } }, // 合并第1行 1到2列
              { s: { r: 2, c: 0 }, e: { r: 2, c: 3 } }, // 合并第3行 1到4列
              { s: { r: 3, c: 0 }, e: { r: 4, c: 0 } }, // 合并第4行第5行 第1列
              { s: { r: 3, c: 1 }, e: { r: 4, c: 1 } }, // 合并第4行第5行 第2列
              { s: { r: 3, c: 2 }, e: { r: 4, c: 2 } }, // 合并第4行第5行 第3列
              { s: { r: 3, c: 3 }, e: { r: 4, c: 3 } }, // 合并第4行第5行 第4列
              { s: { r: 3, c: 4 }, e: { r: 4, c: 4 } }, // 合并第4行第5行 第5列
              { s: { r: 3, c: 5 }, e: { r: 4, c: 5 } }, // 合并第4行第5行 第6列
              { s: { r: 3, c: 6 }, e: { r: 4, c: 6 } }, // 合并第4行第5行 第7列
              { s: { r: 3, c: 7 }, e: { r: 4, c: 7 } }, // 合并第4行第5行 第8列
              { s: { r: 3, c: 8 }, e: { r: 3, c: 10 } }, // 合并第4行 9到11列
              { s: { r: 3, c: 11 }, e: { r: 3, c: 13 } }, // 合并第4行 12到14列
            ],
        callback: (ws) => {
          ws.A3.s = {
            fill: { fgColor: { rgb: 'e8efff' } }, // A17背景
          };
          return ws;
        },
      },
    };
    useExportMoreTableInSheet(sheetConfig, `${portfolioCode || portfolioCodeList}-${portfolioName}`);
  };

  render() {
    const { tableData } = this.state;
    return (
      <div>
        <div className='bondDeviation'>
          <div style={{ display: 'flex' }}>
            <SecondHeaderC title='盈亏明细' />
            <PrimaryGhostC title={'导出'} disabled={tableData.length === 0} onClick={this.handleTableInSheetExport} />
          </div>
          <div id='testTableId'>{this.showTable()}</div>
        </div>
      </div>
    );
  }
}
